function $1(dom) {
  return document.querySelector(dom)
}
function $2(dom) {
  return document.querySelectorAll(dom)
}
let shake1 = { rotate: -20 }
let twee_shake1 = new TWEEN.Tween(shake1).to({ rotate: 20 }, 200).yoyo(true).repeat(7).onUpdate(function (obj) {
  $1(".sign_center img").style.transform = `translate(-50%, -50%) rotate(${obj.rotate}deg)`
}).onComplete(()=>{
  $1(".sign_center img").style.transform = `translate(-50%, -50%) rotate(0deg)`
})

let logo = { y: -130, size: 1 }
let tween_logo = new TWEEN.Tween(logo).to({ y: -50, size: 1.75 }, 1000).start().onUpdate(function (obj) {
  $1(".logo").style.transform = `translate(-50%, ${obj.y}%) scale(${obj.size})`
})

let sign = { opacity: 0 }
let tween_sign = new TWEEN.Tween(sign).to({ opacity: 1 }, 1000).delay(500).onUpdate(function (obj) {
  $1(".sign_center").style.opacity = obj.opacity
})

let halo = { rotate: 0 }
let tween_halo = new TWEEN.Tween(halo).to({ rotate: 3600 }, 100000).repeat(Infinity).onUpdate(function (obj) {
  $1(".halo img").style.transform = `translate(-50%, -50%) rotate(${obj.rotate}deg) scale(1.3)`
})

let halo_show = { opacity: 0 }
let tween_halo_show = new TWEEN.Tween(halo_show).to({ opacity: 1 }, 700).delay(1200).onUpdate(function (obj) {
  $1(".halo").style.opacity = obj.opacity
})

let main_erge = { x: -3, y: 3 }
let tween_main_erge = new TWEEN.Tween(main_erge).to({ x: 0, y: 0 }, 1000).delay(500).start().onUpdate(function (obj) {
  $1(".tiger_left img").style.transform = `translate(${obj.x}rem, ${obj.y}rem)`
})

let curtains_img_one = { left: 0, right: 0 }
let tween_curtains_img_one = new TWEEN.Tween(curtains_img_one).to({ left: -2, right: -2 }, 800).start().onUpdate(function (obj) {
  $1(".main .curtains_left img").style.left = obj.left + 'rem'
  $1(".main .curtains_right img").style.right = obj.right + 'rem'
})

let curtains_img_two = { opacity: 0 }
let tween_curtains_img_two = new TWEEN.Tween(curtains_img_two).to({ opacity: 1 }, 500).delay(800).start().onUpdate(function (obj) {
  $2(".curtains_img_two").forEach(item => {
    item.style.opacity = obj.opacity
  })
})

let title_text = { opacity: 0 }
let tween_title_text = new TWEEN.Tween(title_text).to({ opacity: 1 }, 1000).delay(1000).start().onUpdate(function (obj) {
  $1(".title_text img").style.opacity = obj.opacity
})

let main_title_img = { y: -5, size: 1 }
let tween_main_title_img = new TWEEN.Tween(main_title_img).to({ y: 0, size: 1.4 }, 500).delay(500).start().onUpdate(function (obj) {
  $1(".title img").style.transform = `translate(-50%, ${obj.y}rem) scale(${obj.size})`
})

let label_box = { y: -5, opacity: 0 }
let tween_label_box = new TWEEN.Tween(label_box).to({ y: 0, opacity: 1 }, 1000).delay(1000).onUpdate(function (obj) {
  $1(".label_box").style.transform = `translate(-50%, ${obj.y}rem)`
  $1(".label_box").style.opacity = obj.opacity
})

let lottery_text_box = { opacity: 0 }
let tween_lottery_text_box = new TWEEN.Tween(lottery_text_box).to({ opacity: 1 }, 1000).delay(1000).onUpdate(function (obj) {
  $1(".lottery_text_box").style.opacity = obj.opacity
})

let autograph_logo_bot = { bottom: -100 }
let tween_autograph_logo_bot = new TWEEN.Tween(autograph_logo_bot).to({ bottom: 0 }, 1000).onUpdate(function (obj) {
  $1(".autograph_logo_bot").style.bottom = obj.bottom + '%'
})

let auto_text = { opacity: 0 }
let tween_auto_text = new TWEEN.Tween(auto_text).to({ opacity: 1 }, 4000).delay(1000).onUpdate(function (obj) {
  $1(".auto_text p").style.opacity = obj.opacity
})

let lottery_erge = { x: 4, y: 7 }
let tween_lottery_erge = new TWEEN.Tween(lottery_erge).to({ x: 0, y: 0 }, 1500).delay(1000).onUpdate(function (obj) {
  $1(".lottery_box img").style.transform = `translate(${obj.x}rem, ${obj.y}rem)`
})

let brand = { y: -11, opacity: 0 }
let tween_brand = new TWEEN.Tween(brand).to({ y: 0, opacity: 1 }, 1000).start().onUpdate(function (obj) {
  $1(".brand").style.transform = `translate(-50%, ${obj.y}rem)`
  $1(".brand").style.opacity = obj.opacity
})

let brand_btn = { y: 3, opacity: 0 }
let tween_brand_btn = new TWEEN.Tween(brand_btn).to({ y: 0, opacity: 1 }, 1000).start().onUpdate(function (obj) {
  $1(".brand_btn").style.transform = `translate(-50%, ${obj.y}rem)`
  $1(".brand_btn").style.opacity = obj.opacity
})

let brand_return = { opacity: 0 }
let tween_brand_return = new TWEEN.Tween(brand_return).to({ opacity: 1 }, 1000).delay(1000).onUpdate(function (obj) {
  $1(".brand_return").style.opacity = obj.opacity
})

let lottery_two = { opacity: 0 }
let tween_lottery_two = new TWEEN.Tween(lottery_two).to({ opacity: 1 }, 1000).onUpdate(function (obj) {
  $1(".lottery_right").style.opacity = obj.opacity
  $1(".lottery_text_right").style.opacity = obj.opacity
})

let lottery_box_show = { opacity: 1 }
let tween_lottery_box_show = new TWEEN.Tween(lottery_box_show).to({ opacity: 0 }, 1000).onUpdate(function (obj) {
  $1(".lottery_top").style.opacity = obj.opacity
  $1(".lottery_center").style.opacity = obj.opacity
  $1(".lottery_text_left").style.opacity = obj.opacity
})

// 许愿
let wish_rule = { left: -1 }
let tween_wish_rule = new TWEEN.Tween(wish_rule).to({ left: 0 }, 1000).onUpdate(function (obj) {
  $1(".wish_rule img").style.transform = `translate(${obj.left}rem, -50%)`
})

let wish_bg = { top: 10, top2: 10 }
let tween_wish_bg = new TWEEN.Tween(wish_bg).to({ top: -5, top2: -1.4 }, 1000).onUpdate(function (obj) {
  $1(".wish_bg img").style.transform = `translate(-50%, ${obj.top}rem)`
  $1(".wish_text textarea").style.transform = `translate(-50%, ${obj.top2}rem)`
})

let wish_erge = { x: -3, y: 3 }
let tween_wish_erge = new TWEEN.Tween(wish_erge).to({ x: 0, y: 0 }, 2000).onUpdate(function (obj) {
  $1(".tiger_left_wish img").style.transform = `translate(${obj.x}rem,${obj.y}rem)`
})

let wish_success = { opacity: 0, y1: 105, y2: 115 }
let tween_wish_success = new TWEEN.Tween(wish_success).to({ opacity: 1, y1: 74, y2: 81 }, 500).delay(2000).onUpdate(function (obj) {
  $1(".wish_success").style.opacity = obj.opacity
  $1(".wish_success_one").style.top = obj.y1 + "%"
  $1(".wish_success_two").style.top = obj.y2 + "%"
})

// 预告
let notice_cont = { y: 10, opacity: 0 }
let tween_notice_cont = new TWEEN.Tween(notice_cont).to({ y: -5.8, opacity: 1 }, 1000).start().onUpdate(function (obj) {
  $1(".notice_cont img").style.transform = `translate(-50%, ${obj.y}rem)`
  $1(".notice_cont img").style.opacity = obj.opacity
})

let rightShow = { x: -3 }
let tween_rightShow = new TWEEN.Tween(rightShow).to({ x: -1.2, }, 1000).onUpdate(function (obj) {
  $1(".food_top img").style.right = obj.x + "rem"
})

let rightShow2 = { x: -3 }
let tween_rightShow2 = new TWEEN.Tween(rightShow2).to({ x: 0, }, 1000).delay(800).onUpdate(function (obj) {
  $1(".food_bottom img").style.right = obj.x + "rem"
})

let leftShow = { x: -4 }
let tween_leftShow = new TWEEN.Tween(leftShow).to({ x: 0, }, 1000).delay(1200).onUpdate(function (obj) {
  $1(".Notice_return img").style.transform = `translate(${obj.x}rem, 0)`
})


let showLogo = {opacity:0,size:1}
let tween_showLogo = new TWEEN.Tween(showLogo).to({opacity:1,size:1.3}, 500).onUpdate(function (obj) {
  $1(".autograph .autograph_logo").style.opacity = obj.opacity
  $1(".autograph .autograph_logo").style.transform = `translate(-50%, 0) scale(${obj.size})`
})



animate()
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update()
}

window.addEventListener("load", () => {
  tween_logo.start()
})

// 再来一签
$2(".brand_btn .btnOne").forEach(item => {
  item.addEventListener("click", () => {
    mainAnimation()
    $1(".auto_text p").style.opacity = 0
    $1(".lottery_box img").style.transform = "translate(4rem, 7rem)"
    $1(".brand").style.transform = `translate(-50%, -11rem)`
    $1(".brand").style.opacity = "0"
    $1(".brand_btn").style.transform = `translate(-50%, 3rem)`
    $1(".brand_btn").style.opacity = 0
    $1(".brand_return").style.opacity = 0
  })
});
function mainAnimation() {
  $1(".halo").style.opacity = 0
  $1(".sign_center").style.opacity = 0
  $1(".tiger_left img").style.transform = "translate(-3rem, 3rem)"
  $2(".curtains_img_two").forEach(item => {
    item.style.opacity = 0
  })
  $1(".main .curtains_left img").style.left = 0
  $1(".main .curtains_right img").style.right = 0
  $1(".title img").style.transform = `translate(-50%, -5rem) scale(1)`
  $1(".title_text img").style.opacity = 0
  tween_sign.start()
  tween_halo_show.start()
  tween_halo.start()
  tween_main_erge.start()
  tween_curtains_img_one.start()
  tween_curtains_img_two.start()
  tween_title_text.start()
  tween_main_title_img.start()
}
function lotteryAnimation() {
  setTimeout(() => {
    tween_label_box.start()
    tween_lottery_text_box.start()
    tween_autograph_logo_bot.start()
    tween_auto_text.start()
    tween_lottery_erge.start()
  }, 2000)
}

// 点击抽签
$1(".signboard").addEventListener("click", function () {
  lotteryAnimation()
})

// 点击抽签页二哥
$1(".lottery_box img").addEventListener("click", function () {
  if ($1(".lottery_text_right").style.opacity == "1") {
    $1(".label_box").style.transform = "translate(-50%, -5rem)";
    $1(".label_box").style.opacity = 0
    $1(".lottery_text_box").style.opacity = 0
    $1(".autograph_logo_bot").style.bottom = "-100%"
    $1(".auto_text p").style.opacity = 0
    $1(".lottery_box img").style.transform = "translate(4rem, 7rem)"
    $1(".lottery_text_right").style.opacity = 0
    tween_brand.start()
    tween_brand_btn.start()
    tween_brand_return.start()
  }
})

// 返回抽签页
$1(".brand_return").addEventListener("click", function () {
  $1(".auto_text p").style.opacity = 0
  tween_label_box.start()
  tween_lottery_text_box.start()
  tween_autograph_logo_bot.start()
  tween_auto_text.start()
  tween_lottery_erge.start()
})

// 点击许愿抽奖
$1(".btnTwo").addEventListener("click", function () {
  tween_wish_rule.start()
  tween_wish_bg.start()
  tween_wish_erge.start()
  tween_wish_success.start()
})

//点击完成许愿
$1(".wish_success_one").addEventListener("click", function () {
  tween_notice_cont.start()
  tween_rightShow.start()
  tween_rightShow2.start()
  tween_leftShow.start()
})